﻿<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">

    <title>PlungerJS</title>
	
    <link rel="stylesheet" type="text/css" href="sintaxhighligth/styles/shCore.css" />
    <link rel="stylesheet" type="text/css" href="sintaxhighligth/styles/shThemeDefault.css"/>

    <link rel="Stylesheet" type="text/css" href="css/estilo.css" />


</head>
<body>

    <header>
        <hgroup>
            <h1>PlungerJS</h1>
            <h2>Framework javascript não obstrusivo.</h2>
            <h3>versão 1.0.0</h3>
        </hgroup>
	</header>

    <nav>
		<ul>
			<li><a href="index.html">Home</a></li>
            <li><a href="#modules">Componentes</a>
                <ul>
                    <li><a href="#modulelink">ajaxlink</a></li>
                    <li><a href="#moduleform">ajaxform</a></li>
                </ul>
            </li>
            <li><a href="#api">API</a></li>
            <li>
                <a href="#extend">Extendendo</a>
                <ul>
                    <li><a href="#extendcustom">Criando Componentes</a></li>
                    <li><a href="#extenddoc">Documentar</a></li>
                    <li><a href="#extendtest">Como testar</a></li>
                </ul>
            </li>
            <li><a href="#reference">Referências</a></li>
		</ul>
	</nav>


    <section role="main">

        <article id="home">
            <section>
                
                <h2>O que é?</h2>
                <p>
                Descrever o que é.
                </p>

                <h2>Como funciona?</h2>
                <p> - incluir em um capitulo mais avançado
                Descrever em uma linguagem simples que o funcionamento é baseado na marcação de algumas tags (atributos)
                e a partir destas marcação irá iniciar os componentes.
                Além disso é importante indicar que o funcionamento está relacionado as ancoras (hashtags) de hiperlinks.
                </p>

                <h2>E como posso utilizar?</h2>
                <p>É bem simples, basta incluir o script em sua página e configurar os elementos html (tags) conforme o <a href="#module">componente</a> que você deseja utilizar.</p>
                <p>
                Inclua os seguintes atributos: data-type e data-action, nas tags da página. 
                E como valor basta incluir o nome do <a href="#module">componente</a> que você deseja aplicar para esta tag.
                </p>

                <h2>O que levou a criação deste framework.</h2>
                <ol>
                    <li>Implementar o "javascript unobstrusivo".</li>
                    <li>Diminuir as implementações em javascript.</li>
                    <li>Acessivel à "não programadores" (designer na maioria dos casos).</li>
                    <li>O html deverá conhecer o mínimo possível o javascript</li>
                    <li>Facilidade de se criar novos componentes</li>
                    <li>Utilizar a hasthag (#) como uma forma de carregar componentes</li>
                </ol>

            </section>
            <footer>
                <a href="#">Voltar</a>
            </footer>
        </article>

        <hr />

        

        <article id="modules">
            <header>
                <h1>Componentes</h1>
            </header>
            <section>
                <article id="modulegeral">
                    <p>
                    A inicialização/execução ocorre de 3 formas:
                    </p>
                    <dl>
                        <dt>Novo conteúdo é apresentado.</dt>
                            <dd>Sempre que a página for carregada ou quando for incluído um novo contéudo à página (indicar o que será observado).
                            Para isso basta incluir o atributo <b>data-type</b> que recebe como valor o <b>nome do componente</b> na tag que você deseja.</dd>
                        <dt>Através de algum evento de interação do usuário.</dt>
                            <dd>Quando o usuário interagir com algum elemento (tag) de sua página.
                            Inclua o atributo <b>data-action</b> recebendo o <b>nome do componente</b> como valor a tag.</dd>
                        <dt>Em uma navegação com ancoras (hashtag).</dt>
                            <dd>Neste caso o componente será inicializado sempre que um link do tipo ancora for acionado da seguinte forma <b>#componente/acao</b> onde:
                            <b>componente</b> representa o nome do componente e <b>acao</b> o nome da ação deste componente que você deseja executar ao acionar o link.</dd>
                    </dl>
                    <p>A seguir alguns componentes padrões <i>PlungerJS</i> e como utilizá-los:</p>
                    <footer>
                        <a href="#">Voltar</a>
                    </footer>
                </article>
                <article id="modulelink" class="componente">
                    <a href="../componentes/ajaxlink/doc.htm" target="_self" data-type="ajaxlink" data-action="ajaxlink">Abrir documentação</a>
                    <p>Carregando documentacao...</p>
                </article>
               
            </section>
        </article>

        <hr />

        <article id="api">
            <header>
                <h1>API</h1>
            </header>
            <section>
            </section>
            <footer>
                <a href="#">Voltar</a>
            </footer>
        </article>

        <hr />

        <article id="extend">
            <header>
                <h1>Extendendo</h1>
            </header>
            <section>

            </section>
            <footer>
                <a href="#">Voltar</a>
            </footer>
        </article>

        <hr />

        <article id="reference">
            <header>
                <h1>Referências</h1>
            </header>
            <section>
                <h2>Dependencias:</h2>
                <ol>
                    <li><a href="http://jquery.com/" target="_blank">JQuery</a>: a princípio indispensável</li>
                </ol>
                <h2>Framework ou bibliotecas uteis:</h2>
                <ol>
                    <li><a href="http://backbonejs.org/" target="_blank">Backbonejs</a>: framework q pode ser auxiliar, pois utiliza o conceito de rotas, history e sincronização </li>
                    <li><a href="http://knockoutjs.com/" target="_blank">Knocout</a>: framework mvvm que o .net tem adotado como pradrão nos projetos </li>
                    <li><a href="http://qunitjs.com/" target="_blank">QUnit</a>: para teste automátizado e tdd do desenvolvimento</li>
                </ol>
                <h2>Links:</h2>
                <ol>
                    <li><a href="https://developers.google.com/webmasters/ajax-crawling/" target="_blank">Making AJAX applications crawlable</a>, <a href="https://support.google.com/webmasters/answer/174993?hl=pt-BR">Mais 1</a></li>
                    <li><a href="http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm" target="_blank">Override JQuery function</a></li>
                </ol>
                <h2>Consultar:</h2>
                <ol>
                    <li><a href="http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/" target="_blank">pesquisar Push State</a></li>
                    <li><a href="https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md" target="_blank">Boas praticas</a></li>
                    <li><a href="http://www.jslint.com/" target="_blank">qulidade</a></li>
                    <li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-beginners/" target="_blank">Boas praticas 2</a></li>
                    <li><a href="http://www.thinkful.com/learn/javascript-best-practices-1/Allow-for-Configuration-and-Translation" target="_blank">Boas praticas 3</a></li>
                    <li><a href="http://www.javascripttoolbox.com/bestpractices/" target="_blank">Boas praticas 4</a></li>
                    <li><a href="http://loopinfinito.com.br/2013/09/24/throttle-e-debounce-patterns-em-javascript/" target="_blank">Pode ser util 1</a></li>
                    <li><a href="http://alistapart.com/article/sustainable-web-design" target="_blank">Boas praticas 5</a></li>
                    <li><a href="http://browserdiet.com/" target="_blank">Boas praticas 6</a></li>
                </ol>
            </section>
            <footer>
                <a href="#">Voltar</a>
            </footer>
        </article>

    </section>

	<footer>
	</footer>
    
    <script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>

    <script type="text/javascript" src="sintaxhighligth/scripts/shCore.js"></script>
    <script type="text/javascript" src="sintaxhighligth/scripts/shBrushXml.js"></script>

	<script type="text/javascript" src="../plungerjs-0.4.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            SyntaxHighlighter.all();
        });

        $(document).on("plungerUpdate", PlungerJs.base, function () {
            SyntaxHighlighter.highlight();
        });
    </script>

</body>
</html>
